﻿<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:converters="clr-namespace:FacebookPhotosLiveWriterPlugin.Converters"
    xmlns:atp="clr-namespace:Microsoft.Samples.KMoore.WPFSamples.AnimatingTilePanel;assembly=WPFSamplesLib"
    x:Class="FacebookPhotosLiveWriterPlugin.PhotoAlbumsForm"
    Title="Facebook photos" Height="600" Width="800" 
    ShowInTaskbar="False" 
    WindowStartupLocation="CenterScreen" 
    WindowStyle="SingleBorderWindow" 
    Loaded="Window_Loaded">
	<Window.Resources>
		<LinearGradientBrush x:Key="imageItemBackround" EndPoint="0.5,0" StartPoint="0.5,1">
			<GradientStop Color="#FFD3D2D2" Offset="0"/>
			<GradientStop Color="#FFFFFFFF" Offset=" 0.927"/>
			<GradientStop Color="#FFD3D2D2" Offset="0.442"/>
			<GradientStop Color="#FFFCFCFC" Offset="0.718"/>
		</LinearGradientBrush>

		<Style x:Key="TextBlockIcon" TargetType="{x:Type TextBlock}">
			<Setter Property="FontFamily" Value="Palatino Linotype" />
			<Setter Property="FontSize" Value="26" />
			<Setter Property="Typography.NumeralStyle" Value="OldStyle" />
			<Setter Property="Typography.HistoricalLigatures" Value="True" />
			<Setter Property="Typography.DiscretionaryLigatures" Value="True" />
			<Setter Property="Foreground" Value="#FF175C86" />
		</Style>

	</Window.Resources>
	<Grid >
		<Grid.Resources>
			<converters:PhotoIDToImageUrlConverter x:Key="photoIDToImageUrlConverter" />
			<converters:AlbumToPhotoListConverter x:Key="albumToPhotoListConverter" />
			<Style TargetType="{x:Type TextBox}">
				<Setter Property="HorizontalContentAlignment" Value="Left" />
				<Setter Property="BorderThickness" Value="0,0,0,0" />
				<Setter Property="Margin" Value="2,2,2,2" />
				<Setter Property="Background" Value="Transparent" />
			</Style>

			<Style TargetType="{x:Type Border}">
				<Setter Property="HorizontalAlignment" Value="Left" />
				<Setter Property="VerticalAlignment" Value="Center" />
				<Setter Property="BorderBrush" Value="#FF85A7DB" />
				<Setter Property="Background" Value="#FFF0F7FF" />
				<Setter Property="CornerRadius" Value="5,5,5,5" />

				<Setter Property="Height" Value="24" />

				<Setter Property="BorderThickness" Value="1,1,1,1" />
			</Style>

			<Style TargetType="{x:Type Label}">
				<Setter Property="FontFamily" Value="Verdana" />
				<Setter Property="FontSize" Value="10" />
				<Setter Property="Foreground" Value="#FF3E6494" />
				<Setter Property="HorizontalContentAlignment" Value="Left" />
			</Style>


			<ControlTemplate x:Key="templateSlider" TargetType="Slider" >

				<!-- Border properties are probably unused -->
				<Border BorderBrush="{TemplateBinding BorderBrush}"
						BorderThickness="{TemplateBinding BorderThickness}"
						Background="{TemplateBinding Background}">

					<!-- Grid layout accomodates two TickBars and Track -->
					<Grid>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="Auto" />
							<ColumnDefinition />
							<ColumnDefinition Width="Auto" />
						</Grid.ColumnDefinitions>

						<!-- TickBars are collapsed (invisible) by default) -->
						<TickBar Grid.Column="0" Name="LeftTick"
								 Width="10" Placement="Left" Visibility="Collapsed"
								 Fill="{TemplateBinding Foreground}" />

						<TickBar Grid.Column="2" Name="RightTick"
								 Width="10" Placement="Right" Visibility="Collapsed"
								 Fill="{TemplateBinding Foreground}" />

						<!-- The groove image is provided by this Border -->


						<Border Grid.Column="1" Height="8" Margin="0"
								CornerRadius="2 2 2 2"
								BorderThickness="1" BorderBrush="#FFA9C3DD">
							<Border.Background>
								<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
									<GradientStop Color="#FFA9C3DD" Offset="0"/>
									<GradientStop Color="#FFFFFFFF" Offset="0.927"/>
									<GradientStop Color="#FFA9C3DD" Offset="0.442"/>
									<GradientStop Color="#FFFCFCFC" Offset=" 0.718"/>
								</LinearGradientBrush>
							</Border.Background>
						</Border>

						<!-- That same Grid cell is occupied by the Track -->
						<Track Grid.Column="1" Name="PART_Track">
							<Track.DecreaseRepeatButton>

								<!-- The two RepeatButtons are transparent -->
								<RepeatButton Command="Slider.DecreaseLarge"
											  IsTabStop="False" Focusable="False">
									<RepeatButton.Template>
										<ControlTemplate>
											<Border Background="Transparent" />
										</ControlTemplate>
									</RepeatButton.Template>
								</RepeatButton>
							</Track.DecreaseRepeatButton>

							<Track.IncreaseRepeatButton>
								<RepeatButton Command="Slider.IncreaseLarge"
											  IsTabStop="False" Focusable="False">
									<RepeatButton.Template>
										<ControlTemplate>
											<Border Background="Transparent" />
										</ControlTemplate>
									</RepeatButton.Template>
								</RepeatButton>
							</Track.IncreaseRepeatButton>
							<Track.Thumb>
								<Thumb >
									<Thumb.Template>
										<ControlTemplate>
											<Border Background="Transparent">
												<Rectangle Stroke="#FFA9C3DD" StrokeThickness="1" HorizontalAlignment="Left"
														   VerticalAlignment="Top" Width="8" Height="29.333">
													<Rectangle.Fill>
														<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
															<GradientStop Color="#FF9AB9E1" Offset="0"/>
															<GradientStop Color="#FF9AB9E1" Offset="0.927"/>
															<GradientStop Color="#FFFCFCFC" Offset="0.524"/>
														</LinearGradientBrush>
													</Rectangle.Fill>
												</Rectangle>
											</Border>
										</ControlTemplate>
									</Thumb.Template>
								</Thumb>
							</Track.Thumb>
						</Track>
					</Grid>
				</Border>

				<!-- Define triggers to make the TickBars visible -->
				<ControlTemplate.Triggers>
					<Trigger Property="Slider.TickPlacement" Value="TopLeft">
						<Setter TargetName="LeftTick" Property="Visibility"
													  Value="Visible" />
					</Trigger>
					<Trigger Property="Slider.TickPlacement" Value="BottomRight">
						<Setter TargetName="RightTick" Property="Visibility"
													   Value="Visible" />
					</Trigger>
					<Trigger Property="Slider.TickPlacement" Value="Both">
						<Setter TargetName="LeftTick" Property="Visibility"
													  Value="Visible" />
						<Setter TargetName="RightTick" Property="Visibility"
													   Value="Visible" />
					</Trigger>
				</ControlTemplate.Triggers>
			</ControlTemplate>
			<!-- Define style for the Slider control -->
		</Grid.Resources>


		<ScrollViewer Padding="30,10,0,0" Margin="0,69,0,48">

			<ItemsControl x:Name="imagesItemsControl" ItemsSource="{Binding ElementName=Albums, Path=SelectedItem, 
				Converter={StaticResource albumToPhotoListConverter}}">
				<ItemsControl.ItemsPanel>
					<ItemsPanelTemplate>
						<atp:AniTilePanel
													 ItemHeight="{Binding ElementName=sliderSize, Path=Value}"
													 ItemWidth="{Binding ElementName=sliderSize, Path=Value}"  />
					</ItemsPanelTemplate>
				</ItemsControl.ItemsPanel>
				<ItemsControl.ItemTemplate>
					<DataTemplate>
						<Border Margin="1" BorderThickness="1" CornerRadius="0"  BorderBrush="#FFA9C3DD" Tag="{Binding}"
							MouseLeftButtonUp="Border_MouseLeftButtonUp" Background="{StaticResource imageItemBackround}">

							<Image Source="{Binding Path=ImageUrl}" Margin="10,10,10,10"  Tag="{Binding Path=Caption}" >
								<Image.ToolTip>
									<TextBlock Text="{Binding Path=Caption}" />
										</Image.ToolTip>
							</Image>

						</Border>
					</DataTemplate>
				</ItemsControl.ItemTemplate>
			</ItemsControl>

		</ScrollViewer>
		<Border BorderBrush="#FFA9C3DD" Height="40" Margin="19,10,0,0" BorderThickness="1" CornerRadius="0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="278.667">

			<Border.Background>
				<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
					<GradientStop Color="#FFD3D2D2" Offset="0"/>
					<GradientStop Color="#FFFFFFFF" Offset="0.927"/>
					<GradientStop Color="#FFD3D2D2" Offset="0.291"/>
					<GradientStop Color="#FFFCFCFC" Offset=" 0.646"/>
				</LinearGradientBrush>
			</Border.Background>
			<StackPanel Orientation="Horizontal" Margin="10,3,10,5" >
				<TextBlock  Text="Size" Padding="0,0,10,0" VerticalAlignment="Center" Style="{StaticResource TextBlockIcon}"/>
					<Slider x:Name="sliderSize" Width="200" Height="25" Minimum="150" Maximum="300" SmallChange="40" Value="150"
							    Orientation="Horizontal" Template="{StaticResource templateSlider}" HorizontalAlignment="Center" />
				</StackPanel>
		</Border>
		<ComboBox x:Name="Albums" Height="40" VerticalAlignment="Top" Margin="363,10,22,0" MinWidth="200" IsEditable="False">
			<ComboBox.ItemTemplate>
				<DataTemplate>
					<StackPanel Orientation="Horizontal" >
						<Image Source="{Binding Path=CoverID, Converter={StaticResource photoIDToImageUrlConverter}}" 
							Tag="{Binding Path=Description}" Margin="5,5,5,5">
							<Image.ToolTip>
								<TextBlock Text="{Binding Path=Description}" />
							</Image.ToolTip>
						</Image>
						<TextBlock Text="{Binding Path=Name}" Padding="5,0,0,0" FontSize="14" VerticalAlignment="Center" />
					</StackPanel>
				</DataTemplate>
			</ComboBox.ItemTemplate>
		</ComboBox>

		<Button Height="23" HorizontalAlignment="Right" Margin="0,0,108,11.04" Name="btnInsert" VerticalAlignment="Bottom" Width="75" Click="btnInsert_Click" IsDefault="True">_Insert</Button>
		<Button Height="23" HorizontalAlignment="Right" Margin="0,0,22,11.04" VerticalAlignment="Bottom" Width="75" Name="btnCancel" Content="Cancel" Click="btnCancel_Click" IsCancel="True" />

	</Grid>
</Window>
